<!doctype html>
<html class="no-js fixed-layout">
<head>
    <!-- 公共head Begin -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
    <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
    <!-- minimum-scale=1.0, maximum-scale=1.0 不加这两个在iPhone浏览器下点击缩小了的输入框会使整个页面变大 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title>萌宠之家-C2B2C社会化电商平台</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="statics/img/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="statics/img/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
    <link rel="apple-touch-icon-precomposed" href="statics/img/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="statics/img/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="statics/AmazeUI/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="statics/AmazeUI/assets/css/shop.css">

    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="statics/AmazeUI/assets/js/jquery.min.js"></script>
    <!--<![endif]-->

    <script src="statics/js/plugin/jquery.cookie.js"></script>

    <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
    <script src="statics/js/plugin/jquery.form.js"></script>

    <script src="statics/js/jquery.lSelect.js"></script>
    <script src="statics/js/plugin/jquery.metadata.js"></script>
    <script src="statics/js/plugin/jqPaginator.min.js"></script>
    <script src="statics/js/product.js"></script>
    <!-- 公共head End -->
</head>
<body>
<div class="am-cf shop-main" style="padding-top:0px;">
    <!-- sidebar start -->
    <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only shop-menu" data-am-offcanvas="{target: '#shop-offcanvas'}"></a>
    <div class="sidebar shop-sidebar am-offcanvas" id="shop-offcanvas"></div>
    <!-- sidebar end -->

  <!-- content start -->
  <div class="shop-content">
    <div class="shop-content-body">
      <ol class="am-breadcrumb am-margin-left am-margin-bottom-0">
        <li><span class="am-icon-star am-icon-fw"> </span>萌宠管理</li>
        <li class="am-active">萌宠待售</li>
      </ol>

      <a style="margin: 15px;" class="am-btn am-btn-primary am-btn-xs am-margin-left-sm" href="member_product_input.html">添加萌宠</a>

      <div class="am-panel am-panel-default am-text-xs am-margin-horizontal-sm">
        <div class="am-panel-bd am-g am-padding-0 am-scrollable-horizontal">
            <table id="tblProductList" class="am-table am-table-striped am-table-hover table-main am-text-nowrap am-margin-bottom-0">
                <thead>
                <tr>
                    <th>序号</th>
                    <th><div class="app-table-td-buttons-width-160">操作</div></th>
                    <th>宠物名称</th>
                    <th>宠物分类</th>
                    <th>销量</th>
                    <th>访问量</th>
                    <th>粉丝数</th>
                    <th>售价</th>
                    <th>审核</th>
                    <th>上架</th>
                    <th>精品</th>
                    <th>库存</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
          <div id="noData" style="display: none;" class="am-kai am-text-center am-margin">
            <h3>没有找到任何记录!</h3>
          </div>
        </div>
          <!-- 分页 -->
          <hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" />
          <div id="divPagination" class="am-margin-left am-text-xs">
              <ul id="pagination" class="am-pagination"></ul>
          </div>
      </div>
    </div>
  </div>
  <!-- content end -->
</div>
</body>
<script src="statics/AmazeUI/assets/js/amazeui.min.js"></script>
<script src="statics/AmazeUI/assets/js/amazeui.modal.js"></script>
<script src="statics/js/base.js"></script>
<script src="statics/AmazeUI/assets/js/validator.js"></script>

<script>
    // 商品列表
    let productList = new Array();

    // 商品分类列表
    let categoryList = new Array();

    // 查询条件对象
    let queryObject = new Object();

    let jsonUser;
    let token;

    $().ready(function() {

        // 判断用户信息和token是否存在
        jsonUser = sessionStorage.getItem("user");
        token = sessionStorage.getItem("token");

        if(!jsonUser || !token) {
            top.location.href = 'login.html';
            return;
        }

        // 设置用户id
        let user = JSON.parse(jsonUser);
        queryObject.userId = user.id;

        // 加载公共侧边栏模板
        $('.sidebar').load('sidebar.html');

        // 加载'商品分类'列表
        loadCategoryList();

        // 加载'商品'列表数据
        loadProductList();

    });// $().ready(function());

/**	加载'商品'列表数据 **/
function loadProductList() {

    // 加载'商品列表'数据
    $.post('http://localhost:8080/product/search', queryObject, function (result) {

        // 如果返回的是token失效，就重新登录
        if(result.code == 419) {

            Modal.confirm('当前会话token失效，请重新登录页面！', {
                closeViaDimmer: false,
                onConfirm: function() {
                    top.location.href = 'admin_login.html';
                },
                onCancel: function() {
                    top.location.href = 'admin_login.html';
                }
            });// Modal.confirm();

            return;
        }// if(result.code == 419);

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            Modal.alert(result.msg);
            return;
        }

        // 如果返回的数据响应码为200
        // 就进行表格数据填充
        let pageResult = result.data;

        productList = pageResult.list;

        // 填充表格数据
        fillProductList();

        // 初始化分页插件
        $("#pagination").remove();
        $("#divPagination").append('<ul id="pagination" class="am-pagination"></ul>');

        $.jqPaginator( '#pagination', {
            totalPages: pageResult.pages,
            totalCounts:pageResult.total,
            visiblePages: 10,
            currentPage: pageResult.pageNum,
            prev: '<li><a href="javascript:void(0);"><span class="am-icon-arrow-circle-left"></span> 上一页</a></li>',
            next: '<li><a href="javascript:void(0);">下一页 <span class="am-icon-arrow-circle-right"></span></a></li>',
            page: '<li><a href="javascript:void(0);">{{page}}</a></li>',
            activeClass: 'am-active',
            onPageChange:function( num, type ){

                // 加载指定页码数据
                if (type == 'change'){
                    queryObject.currentPage = num;
                    loadProductList();
                }

            }// onPageClick();

        });// $("#pagination").twbsPagination();

        $("#pagination").append('<li>共' + pageResult.pages + '页</li>');

    });// $.post();

}// loadProductList();

/** 填充表格数据 **/
function fillProductList( ) {

    // 清空表格数据
    $('#tblProductList tbody').empty();
    // 隐藏显示提示
    $('#noData').hide();

    // 如果没有集合数据，就直接返回
    if( !productList || productList.length == 0 ){
        // 设置没有数据提示
        $('#noData').show();
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < productList.length; i++ ) {

        let product = productList[i];

        let trId = '<tr id="listTr' + product.id + '">';

        // 序号
        let tdNo = '<td>' + (i+1) + '</td>';

        // 操作
        let tdOpt = '<td><div class="am-btn-group am-btn-group-xs">';

        // 编辑按钮
        let btnEdit = '<button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary app-table-button-padding" onclick="location.href=\'member_product_input.html?id=' + product.id +'\'">'
            + '<span class="am-icon-pencil"> 编辑</span></button>';

        // 如果商品状态为'上架'，则'编辑'按钮不可点击
        if( product.status == PRODUCT_STATUS_CONST.ON_SALE ) {

            btnEdit = '<button type="button" disabled="disabled" class="am-btn am-btn-default am-btn-xs am-text-secondary app-table-button-padding" onclick="location.href=\'product_input.html?id=' + product.id +'\'">'
                + '<span class="am-icon-pencil"> 编辑</span></button>';
        }

        // 删除按钮
        let btnDelete = '<button type="button" class="am-btn am-btn-default am-btn-xs app-table-button-padding" onclick="deleteOne(\'' + product.id + '\')">'
            + '<span class="am-icon-trash-o"> 删除</span></button>';

        // 发布按钮
        let btnPublish = '<button type="button" class="am-btn am-btn-default am-btn-xs am-text-success app-table-button-padding" onclick="publishOne(\'' + product.id + '\')">'
            + '<span class="am-icon-paper-plane"> 发布</span></button>';

        // 判断商品状态是否不等于‘待发布’和‘审核拒绝’
        if( product.status != PRODUCT_STATUS_CONST.WAIT_SUBMIT
            && product.status != PRODUCT_STATUS_CONST.REJECT ) {
            // 如果不等于‘待发布’，则发布按钮不可点击
            btnPublish = '<button type="button" disabled="disabled" class="am-btn am-btn-default am-btn-xs am-text-success app-table-button-padding" onclick="publishOne(\'' + product.id + '\')">'
                + '<span class="am-icon-paper-plane"> 已发布</span></button>';

            // 操作封装(已发布的商品，不能编辑和删除)
            tdOpt += btnPublish + '</div></td>';
        } else {
            // 操作封装(待发布的商品，可以进行编辑和删除)
            tdOpt += btnEdit + btnDelete + btnPublish + '</div></td>';
        }// else ( product.status != PRODUCT_STATUS_CONST.WAIT_SUBMIT );


        // 商品名称
        let tdName = '<td class="productName"><a href="product_content.html?id=' + product.id + '&cid=' + product.categoryId + '">';

        // 商品图片
        let tdImage = '<img width="60px" height="60px" style="border: 1px solid #ddd;" src="' + IMAGE_URL_CONST.PRODUCT + product.mainImage + '" />&emsp;';

        // 封装商品名称
        tdName += tdImage + product.name + '</a></td>';
        // 名称
        //let tdName = '<td><div class="am-text-truncate app-text-truncate-product-name">' + product.name + '</div></td>';

        // 分类
        let tdCategory = '<td>' + getCategoryPath(product.categoryId) + '</td>';

        // 价格
        let tdPrice = '<td>' + priceCurrencyFormat(product.price) + '</td>';

        // 是否审核通过
        let tdPass = '<td>&nbsp;</td>';

        // 判断商品状态
        // 如果‘商品状态’为‘审核拒绝’
        if( product.status == PRODUCT_STATUS_CONST.REJECT ) {
            // 就显示‘X’标记
            tdPass = '<td><i class="am-icon-close"></i></td>';

        } else if( product.status != PRODUCT_STATUS_CONST.WAIT_SUBMIT
            && product.status != PRODUCT_STATUS_CONST.PENDING  ) {
            // 如果‘商品状态’不是‘待发布’和‘审核中’，就显示‘√’符号
            tdPass = '<td><i class="am-icon-check"></i></td>';
        }

        // 是否上架
        let tdOnSale = '<td>&nbsp;</td>';

        // 判断商品是否上架
        if( product.status == PRODUCT_STATUS_CONST.ON_SALE ) {

            tdOnSale = '<td><i class="am-icon-check"></i></td>';
        }

        // 是否精品推荐
        let tdRecommend = '<td>&nbsp;</td>';

        // 判断商品是否精品推荐
        if( product.recommend == true ) {

            tdRecommend = '<td><i class="am-icon-check"></i></td>';
        }

        // 销量
        let tdSellNum = '<td>' + product.sellNum + '</td>';

        // 访问量
        let tdViewNum = '<td>' + product.viewNum + '</td>';

        // 粉丝数
        let tdFollowNum = '<td>' + product.followNum + '</td>';

        // 库存
        let tdStock = '<td>' + product.stock + '</td>';

        // 封装整条tr单元格
        trId += tdNo + tdOpt + tdName + tdCategory + tdSellNum + tdViewNum + tdFollowNum + tdPrice + tdPass + tdOnSale + tdRecommend + tdStock + '</tr>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblProductList tbody').append(trId);

    }// for();

}// fillProductList();

    /**	加载'商品分类'列表数据 **/
    function loadCategoryList() {

        // 加载'商品分类'数据
        $.ajax({
            type: 'POST',
            url: 'http://localhost:8080/category/getAll',
            async: false,
            success: function (result) {

                // 如果返回的数据的响应码不是'成功(200)'
                if (result.code != 200) {
                    Modal.alert(result.msg);
                    return;
                }

                // 如果返回的数据响应码为200
                // 就进行表格数据填充
                categoryList = result.data;

                // 填充表格数据
                fillCategoryList();

            }// success();

        });// $.post();

    }// loadCategoryList();

    /** 填充表格数据 **/
    function fillCategoryList( ) {

        // 循环构造单元格数据，并进行填充
        for( let i = 0; i < categoryList.length; i++ ) {

            let category = categoryList[i];

            // 如果当前分类的父id，不等于0，就跳过本次循环
            if( category.parentId != 0 ) continue;

            // 就将数据字典项添加到<select>下拉框中
            let optItem = '<option value="' + getChildrenCategoryIds(category.id) + '">'+ category.name +'</option>';
            $('#categoryIds').append(optItem);

            // 填充子分类列表
            fillChildrenCategoryList(category.id);

        }// for();

    }// fillCategoryList();

    /** 根据父分类id，填充子分类列表 **/
    function fillChildrenCategoryList( parentId ) {

        // 循环构造单元格数据，并进行填充
        for( let i = 0; i < categoryList.length; i++ ) {

            let category = categoryList[i];

            // 如果当前分类的父id，不等于传入的分类id，就跳过本次循环
            if( category.parentId != parentId ) continue;

            // 就将数据字典项添加到<select>下拉框中
            let optItem = '<option value="' + category.id + '">&nbsp;--&nbsp;'+ category.name +'</option>';
            $('#categoryIds').append(optItem);

        }// for();

    }// fillChildrenCategoryList( parentId );

    /** 根据商品分类id，获取商品分类路径信息 **/
    function getCategoryPath( categoryId ) {

        // 分类路径
        let categoryPath = "";

        // 父分类id
        let parentCategoryId;

        // 子分类名称
        let childCategoryName;

        // 循环查找父分类id
        for( let i = 0; i < categoryList.length; i++ ) {

            let category = categoryList[i];

            // 如果当前分类的id，等于传入的分类id
            if( category.id == categoryId ){
                // 设置父分类id
                parentCategoryId = category.parentId;
                // 设置子分类名称
                childCategoryName = category.name;
                break;
            }

        }// for();

        // 循环查找父分类名称
        for( let i = 0; i < categoryList.length; i++ ) {

            let category = categoryList[i];

            // 如果当前分类的父id，等于找到的父分类id
            if( category.id == parentCategoryId ){
                // 设置当前父分类名称路径
                categoryPath = category.name + '&nbsp;->&nbsp;' + childCategoryName;
                break;
            }

        }// for();

        return categoryPath;


    }// getCategoryPath( categoryId );

    /** 根据商品分类父id，获取子分类id列表 **/
    function getChildrenCategoryIds( parentCategoryId ) {

        // 分类id列表字符串
        let categoryIds = "";

        // 循环构造单元格数据，并进行填充
        for( let i = 0; i < categoryList.length; i++ ) {

            let category = categoryList[i];

            // 如果当前分类的父id，不等于传入的父分类id，就跳过本次循环
            if( category.parentId != parentCategoryId ) continue;

            // 如果当前分类的父id，等于传入的父分类id
            categoryIds += category.id + ",";

        }// for();

        // 去掉最后1位(,)逗号
        categoryIds = categoryIds.substring(0, categoryIds.length - 1);

        return categoryIds;

    }// getChildrenCategoryIds( parentCategoryId );

    //单行删除
    function deleteOne( productId ) {
        Modal.register(['confirm','alert']);
        Modal.confirm("您确定要删除吗？",{
            relatedTarget: this,
            onConfirm: function(options) {
                $.ajax({
                    type: 'POST',
                    url: 'http://localhost:8080/product/delete',
                    dataType: "json",
                    async: false,
                    data: { token: token, productId: productId},
                    success: function( result ) {

                        // 如果返回的数据的响应码不是'成功(200)'
                        if (result.code != 200) {
                            Modal.alert(result.msg);
                            return;
                        }

                        // 如果返回的数据响应码为200
                        // 删除商品信息数据
                        $("#listTr" + productId).remove();
                        Modal.alert('删除成功！');

                    }// success: function( result );
                });
            }// onConfirm: function(options);
        });
    }// deleteOne(url, index);

/**
 * 商品'发布'操作
 * @param productId 商品id
 */
function publishOne( productId ) {

    Modal.register(['confirm','alert']);
    Modal.confirm("您确定要发布吗？",{
        relatedTarget: this,
        onConfirm: function(options) {
            $.ajax({
                type: 'POST',
                url: 'http://localhost:8080/product/updateStatus',
                dataType: "json",
                async: false,
                data: { token: token, status: PRODUCT_STATUS_CONST.PENDING, id: productId},
                success: function( result ) {

                    // 如果返回的数据的响应码不是'成功(200)'
                    if (result.code != 200) {
                        Modal.alert(result.msg);
                        return;
                    }

                    // 如果返回的数据响应码为200
                    Modal.alert('发布成功，请等待管理员审核！');

                    // 刷新商品列表
                    loadProductList();

                }// success: function( result );
            });
        }// onConfirm: function(options);
    });
}// publishOne( productId );

</script>
</html>